<!doctype html>
<html lang="en">
  <head>
    <script src="node_modules/@picovoice/web-voice-processor/dist/iife/index.js"></script>
    <script src="node_modules/@picovoice/porcupine-web/dist/iife/index.js"></script>
    <script src="keywords/porcupineKeywords.js"></script>
    <script src="models/porcupineModel.js"></script>
    <script type="application/javascript" src="scripts/porcupine.js"></script>
  </head>
  <body>
    <h1>Porcupine Web Demo</h1>
    <p>This demo uses Porcupine for Web and the WebVoiceProcessor to:</p>
    <ol>
      <li>
        Create an instance of Porcupine that listens for the selected keyword.
      </li>
      <li>
        Acquire microphone (& ask permission) data stream and convert to voice
        processing format (16kHz 16-bit linear PCM). The down-sampled audio is
        forwarded to the Porcupine engine. The audio <i>does not</i> leave the
        browser: all processing is occurring via the Porcupine WebAssembly code.
      </li>
      <li>
        Listen for keyword detection events from the Porcupine engines and
        output them to the page.
      </li>
    </ol>
    <p>After entering the AccessKey, click the "Start Porcupine" button.</p>
    <p>
      While listening you can try out different keywords using the "Keywords"
      dropdown.
    </p>
    <hr />
    <label for="accessKey"
      >AccessKey obtained from
      <a href="https://console.picovoice.ai/">Picovoice Console</a>:</label
    >
    <input type="text" id="accessKey" name="accessKey" />
    <input
      type="button"
      id="submit"
      value="Start Porcupine"
      onclick="startPorcupine(
                document.getElementById('accessKey').value,
                parseInt(document.getElementById('keywords').value))"
    />
    <br />
    <br />
    <label for="keywords">Keyword:</label>
    <select
      id="keywords"
      name="keywords"
      onchange="if (window.WebVoiceProcessor.WebVoiceProcessor.isRecording) { startPorcupine(
                document.getElementById('accessKey').value,
                parseInt(document.getElementById('keywords').value)) }"
    ></select>
    <hr />
    <div id="status" style="white-space: pre"></div>
    <br />
    <div id="result"></div>
  </body>
</html>
